<template>
  <el-form>
    <el-form-item label="账号">
      <el-input v-model.trim="User.userName" readonly />
    </el-form-item>
    <el-form-item label="昵称">
      <el-input v-model.trim="User.userPet" maxlength="20" show-word-limit />
    </el-form-item>
    <el-form-item label="ID">
      <el-input v-model.trim="User.userId" readonly />
    </el-form-item>
    <el-form-item label="性别"><br>
      <el-select v-model="gender" placeholder="保密">
        <el-option label="男" value="男" />
        <el-option label="女" value="女" />
      </el-select>
    </el-form-item>
    <el-form-item label="注册时间">
      <el-input v-model.trim="User.userRegisterTime" readonly />
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model.trim="User.userEmail" placeholder="保密" />
    </el-form-item>
    <el-form-item label="个性签名">
      <el-input v-model.trim="User.userDescription" placeholder="有个性没签名" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">确认</el-button>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model.trim="password1" show-password placeholder="请输入密码" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model.trim="password2" show-password placeholder="请重新输入" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="changePass">确认</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { channgePass, updateUserInfo, logout } from '@/api/user'
import { removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'
export default {
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          userName: '',
          userPet: '',
          userId: '',
          userEmail: '',
          userGender: '',
          userRegisterTime: '',
          userDescription: ''
        }
      }
    }
  },
  data() {
    return {
      User: this.user,
      gender: '',
      password1: '',
      password2: ''
    }
  },
  watch: {
    User: {
      deep: true,
      handler(newVal) {
        if (this.User.userGender === 1) { this.gender = '男' } else if (this.User.userGender === 0) { this.gender = '女' } else { this.gender = null }
      },
      immediate: true
    }
  },
  methods: {
    submit() {
      /* this.$message({
          message: 'User information has been updated successfully',
          type: 'success',
          duration: 5 * 1000
        })*/
      let userInfo
      if (this.gender !== null) { this.gender == '男' ? this.User.userGender = 1 : this.User.userGender = 0 }
      userInfo = this.User
      updateUserInfo(userInfo)
      this.$message({
        message: '修改的信息将在下次登录时生效',
        type: 'success',
        duration: 5 * 1000
      })
    },
    changePass() {
      if (this.password1 === '') {
        this.$message('请输入密码')
        return
      }
      if (this.password2 === '') {
        this.$message('请确认密码')
        return
      }
      if (this.password1 !== this.password2) {
        this.$message('两次密码不匹配')
        return
      }
      channgePass(this.User.userName, this.password1)
      this.$message('密码修改成功')
      logout({ userName: this.User.userName }).then(res => {
        this.$message({
          type: 'warning',
          message: '请重新登录'
        })

        setTimeout(() => {
          removeToken()
          this.$router.push(`/login?redirect=${this.$route.fullPath}`)
        }, 1000)
      })
    }
  }
}
</script>
